<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Redux 03 getState</title>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdn.bootcss.com/redux/3.7.2/redux.js"></script>
    <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/vs2015.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>

    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div id="root"></div>

<script >
    const {createStore} = Redux;

    var reducer_0 = function (state, action) {
        console.log('reducer_0 was called with state', state, 'and action', action);
    }

    var store_0 = createStore(reducer_0);
    // 输出: reducer_0 was called with state undefined and action { type: '@@redux/INIT' }

    // 为了读取 Redux 保存的 state，你可以调用 getState
    console.log('store_0 state after initialization:', store_0.getState())
    // 输出: store_0 state after initialization: undefined

    // 都已经初始化过了，难道程序的 state 还是 undefined 的？没错，正是如此，
    // 到目前为止，我们的 reducer 还什么事都没做过…… 你是否还有印象，我们在 "about-state-and-meet-redux" 那一章里是怎么描述一个 reducer 的预期行为的？
    //   “一个 reducer 只是一个函数，它能收到程序当前的 state 与 action，
    //    然后返回一个 modify（又或者学别人一样称之为 reduce ）过的新 state ”
    // 我们的 reducer 目前什么都不返回，所以程序的 state 当然只能是 reducer() 返回的那个叫 “undefined” 的东西。

    // 接下来，我们试着在 reducer 收到 undefined 的 state 时，给程序发一个初始状态：

    var reducer_1 = function (state, action) {
        console.log('reducer_1 was called with state', state, 'and action', action)
        if (typeof state === 'undefined') {
            return {}
        }

        return state;
    }

    var store_1 = createStore(reducer_1)
    // 输出：reducer_1 was called with state undefined and action { type: '@@redux/INIT' }

    console.log('store_1 state after initialization:', store_1.getState())
    // 输出：store_1 state after initialization: {}

    // 如我们所愿，现在 Redux 初始化以后返回的 state 变成 {} 了
    //
    // 感谢ES6，这个模式现在实现起来很清晰：

    var reducer_2 = function (state = {}, action) {
        console.log('reducer_2 was called with state', state, 'and action', action)

        return state;
    }

    var store_2 = createStore(reducer_2)
    // 输出: reducer_2 was called with state {} and action { type: '@@redux/INIT' }

    console.log('store_2 state after initialization:', store_2.getState())
    // 输出: store_2 state after initialization: {}


    // 估计你已经发现了，我们给 reducer_2 的 state 参数传了默认值之后，
    // reducer 就不会再取到 undefined 的 state 了。

    // 小结一下：调用  reducer ，只是为了响应一个派发来的 action 。
    // 接下来，我们在 response 里模拟一个 state 修改，其响应的 action 类型是 'SAY_SOMETIHG'

    var reducer_3 = function (state = {}, action) {
        console.log('reducer_3 was called with state', state, 'and action', action)

        switch (action.type) {
            case 'SAY_SOMETHING':
                return {
                    ...state,
                    message: action.value
                }
            default:
                return state;
        }
    }

    var store_3 = createStore(reducer_3)
    // 输出: reducer_3 was called with state {} and action { type: '@@redux/INIT' }

    console.log('store_3 state after initialization:', store_3.getState())
    // 输出: store_3 state after initialization: {}

</script>

</body>
</html>